<script setup>
import { ref, onMounted } from 'vue';
import { getAqiTrend } from '@/api/AqiTrend.js';
import { format } from "date-fns";

// 获取AQI空气质量指数超标趋势数据
const search = async () => {
  console.log(duration.value);
  console.log(duration.value);

  const startDate = format(duration.value[0], 'yyyy-MM');
  const endDate = format(duration.value[1], 'yyyy-MM');

  const res = await getAqiTrend(startDate, endDate);
  // const res = await getAqiTrend(aqiData.value[0], aqiData.value[1]);
  if (res.code === 200) {
    aqiData.value = res.data;
  }
}
// 模拟的AQI空气质量指数超标趋势数据
const aqiData = ref([]);

const duration = ref([]);
onMounted(() => {
  const end = new Date();
  const start = new Date();
  start.setMonth(start.getMonth() - 6);
  duration.value = [start, end];

  search();
});

const shortcuts = [
  {
    text: '本月',
    value: [new Date(), new Date()],
  },
  {
    text: '本年',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    },
  },
  {
    text: '最近六个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    },
  },
]
</script>

<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>AQI空气质量指数超标趋势</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- AQI空气质量指数超标趋势卡片 -->
    <el-card class="aqi-card">
      <template #header>
        <div class="card-header">
          <span>AQI空气质量指数超标趋势</span>
          <div class="block">
            <el-date-picker v-model="duration" type="monthrange" unlink-panels range-separator="To" @change="search"
              start-placeholder="起始月份" end-placeholder="结束月份" :shortcuts="shortcuts" />
          </div>
        </div>
      </template>
      <el-table :data="aqiData" style="width: 100%" height="450">
        <el-table-column prop="id" label="序号" width="200" />
        <el-table-column prop="month" label="月份" width="250" />
        <el-table-column prop="overNumber" label="AQI空气质量指数超标数量" width="300" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.aqi-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 添加额外的样式以匹配图片中的样式 */
.card-header span {
  font-size: 16px;
  font-weight: bold;
}

.el-table th,
.el-table td {
  text-align: center;
}

.el-table .cell {
  white-space: nowrap;
}
</style>